<template>
  <div class="auto">
    <div class="dd">
      <div class="figer">
        <h2 class="a">消息</h2>
      </div>
      <div class="deom">
        <div>
          <img src="../../imglcz/pinlun.png" class="d1" />
          <span class="s1">回答评论</span>
        </div>
        <div>
          <img src="../../imglcz/souchang.png" class="d2" />
          <span class="s2">点赞收藏</span>
        </div>
        <div>
          <img src="../../imglcz/fensi.png" class="d3" />
          <span class="s3">粉丝</span>
        </div>
      </div>
      <div class="po">
        <div class="bus">
          <div class="img">
            <img src="../../imglcz/xitong.png" />
          </div>
          <span class="s4"
            ><span class="big">系统通知</span>
            <span class="time">03-28</span>
            <br />
            <div class="write">无痕关注了你快去和她聊天吧</div></span
          >
        </div>
        <div class="bus">
          <div class="img">
            <img src="../../imglcz/touxiang1.png" />
          </div>
          <span class="s4">
            <span class="big">王吉力</span>
            <span class="time">03-28</span>
            <br />
            <div class="write">你的小狗啥品种的</div>
          </span>
        </div>
        <div class="bus">
          <img src="../../imglcz/touxiang2.png" />
          <span class="s4">
            <span class="big">刘匆匆</span>
            <span class="time">03-28</span>
            <br />
            <div class="write">能分享下你小狗穿的衣服吗？</div>
          </span>
        </div>
        <div class="bus">
          <div class="img">
            <img src="../../imglcz/touxiang3.png" />
          </div>
          <span class="s4">
            <span class="big">狱长</span>
            <span class="time">03-28</span>
            <br />
            <div class="write">今天在公园遇到一个带小猫的就是你吧</div>
          </span>
        </div>
        <div class="bus">
          <div class="img">
            <img src="../../imglcz/touxiang4.png" />
          </div>
          <span class="s4">
            <span class="big">小雷</span>
            <span class="time">03-28</span>
            <br />
            <div class="write">我家的小狗最近好不听话</div>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "lcZ",
};
</script>
<style lang="less" scoped>
.auto {
  width: 25.9375rem;
  height: 100vh;
}
.figer {
  width: 100%;
  height: 70px;
  text-align: center;
  color: #000000;
  font-weight: bold;
  font-family: "Ping Fang  SC  Bold";
  line-height: 70px;
}
.po {
  width: 25.9375rem;
  // padding: 0 .625rem;
}
.bus {
  position: relative;
  //   width: 23.125rem;
  height: 3.75rem;
  margin-top: 0.9375rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid #a19d9d;
  .img {
    display: inline-block;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 1.5625rem;
  }
}

.deom {
  height: 9.375rem;
  width: 25.9375rem;
  border-bottom: 0.125rem solid #d3d3d3;
  border-top: 0.125rem solid #d3d3d3;
  //   display: flex;
  //   justify-content: space-around;
}
.d1 {
  position: absolute;
  margin-left: 2.9375rem;
  margin-top: 2.5rem;
}
.s1 {
  position: absolute;
  margin-left: 2.8125rem;
  margin-top: 6.25rem;
}
.d2 {
  position: absolute;
  margin-left: 11rem;
  margin-top: 2.1875rem;
}
.s2 {
  position: absolute;
  margin-left: 11rem;
  margin-top: 6.25rem;
}
.d3 {
  position: absolute;
  margin-left: 18.75rem;
  margin-top: 2.6875rem;
}
.s3 {
  position: absolute;
  margin-left: 19.375rem;
  margin-top: 6.25rem;
}

.s4 {
  display: inline-block;
  position: absolute;
  top: 0.1875rem;
  width: 19rem;
  margin-left: 1.3125rem;
  .time,
  .write {
    opacity: 0.412;
    font-size: 0.75rem;
    color: #000000;
    font-weight: bold;
    font-family: "Ping Fang  SC  Bold";
    display: inline-block;
  }

  .time {
    float: right;
  }
  .big {
    font-size: 1.125rem;
    color: #000000;
    font-weight: bold;
    font-family: "Ping Fang  SC  Bold";
  }
}
</style>